<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的委派</title>
    <style>
        a{
            text-decoration: none;
            font-size: 20px;
        }
    </style>
    <script>
        /* 
            指绑定一次事件，既可以让所有的超链接（包括现有的和要添加的都具有这些事件）

            委派
                就是将绑定给多个元素的事件，绑定给一个共同的祖先元素，（一般是document），这样可以降低代码的复杂度，降低代码的维护

            1.将事件绑给document，这样事件点击超连接时，由于事件的冒泡，会导致dcument上的点击事件触发，这样只绑定一次，所有的超链接都具有这些事件。
                    
            缺点（点击document上的任意位置都能触发事件，范围过大）
            解决方法：
                在执行之前，进行判断事件是由谁触发的，如果是希望的，则触发，不希望的则不触发。
        */

        // 点击超链接，就显示超链接中的文字
        document.addEventListener("DOMContentLoaded",()=>{

            const btn=document.querySelectorAll(".btn")[0]
            const list=document.querySelector(".list")
            const links=list.getElementsByTagName("a")

            document.addEventListener("click",(event)=>{
                if (Array.from(links).includes(event.target)){
                    console.log(event.target.textContent)
                }
            })
        // 点击按钮之后，可以在ul中新添加一个li
            btn.addEventListener("click",()=>{
                list.insertAdjacentHTML("beforeend",`<li><a href='javascript:;'>超链接${links.length+1}</a></li>`)
            })

        })
    </script>
</head>
<body>
    <button class="btn">按钮</button>
    <hr>
    <ul class="list">
        <li><a href="javascript:;">超链接1</a></li>
        <li><a href="javascript:;">超链接2</a></li>
        <li><a href="javascript:;">超链接3</a></li>
        <li><a href="javascript:;">超链接4</a></li>
    </ul>
</body>
</html>